<template>
  <div style="">
    <div class="user-top-bar">
      <div class="user-top-content center">
        <div class="user-left-btn user-btn">
          <i class="icon icon-saoma"></i>
        </div>
        <div class="user-right-btn user-btn">
          <i class="icon icon-setting"></i>
        </div>
        <div class="user-top-img">
          <img :src="url" alt="">
        </div>
        <div class="user-to-login">
          <p>屠华</p>
          <p class="address">嘉兴嘉通气化站</p>
        </div>
      </div>
    </div>
    <div class="menu-flex user-center-bar">
      <flexbox :gutter="0">
        <flexbox-item>
          <div>
            账户余额 <span class="blue-button">充值</span>
          </div>
          <div class="blue-text">￥ 280</div>
        </flexbox-item>
        <flexbox-item>
          <div>
            LNG积分 <span class="blue-button">更多</span>
          </div>
          <div class="blue-text"><i class="icon icon-jifen"></i> 3240</div>
        </flexbox-item>
      </flexbox>
    </div>
    <div class="menu-flex">
      <flexbox :gutter="0">
        <flexbox-item>
          <div class="flex-content">
            <i class="icon icon-dingdanxuqiu blue-icon"></i>
            <p>订单需求</p>
          </div>

        </flexbox-item>
        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-zongheyewudingdan orange-icon"></i>
            <p>业务订单</p>
          </div>

        </flexbox-item>
        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-kuaidi red-icon"></i>
            <p>配送单</p>
          </div>


        </flexbox-item>
      </flexbox>
      <flexbox :gutter="0">
        <flexbox-item>
          <div class="flex-content">
            <i class="icon icon-shebeixunjian2 green-icon "></i>
            <p>巡检单</p>
          </div>
        </flexbox-item>
        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-malfunction skyBlue-icon"></i>
            <p>故障单</p>
          </div>

        </flexbox-item>
        <flexbox-item>

          <div class="flex-content">
            <i class="icon icon-lishidingdan yellow-icon"></i>
            <p>历史订单</p>
          </div>

        </flexbox-item>
      </flexbox>
    </div>


  </div>
</template>
<script>
  import {Flexbox, FlexboxItem, Icon} from 'vux'

  export default {
    components: {
      Flexbox,
      Icon,
      FlexboxItem
    },
    data () {
      return {
        url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509701213380&di=6d400d1d05ce74c17e88be9ee04175d6&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D8e0879e8f2198618554ae7c722844406%2F377adab44aed2e73b6c77aa58d01a18b87d6fa09.jpg'
      }
    },
    methods: {
      goPath(name){
        this.$router.push({
          name: name
        });
      }
    }
  }
</script>

<style scoped>
  .address{
    font-size: 14px;
  }

  .user-top-bar {
    height: 6.8rem;
    background: url("../../assets/img/user-bg.jpg") no-repeat;
    background-size: cover;
    position: relative;
  }

  .user-btn {
    position: absolute;
    top: 3px;
  }

  .user-btn .icon {
    font-size: 30px;
  }

  .user-left-btn {
    left: 10px;
  }

  .user-right-btn {
    right: 10px;
  }

  .center {
    text-align: center;
    padding-top: 2rem;
    color: #fff;
    font-size: 18px;
    font-weight: 100;
  }

  .center img {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid #fff;
  }

  .vux-flexbox .vux-flexbox-item {
    border: 1px solid #f6f6f6;
    background: #fff;
    text-align: center;
    font-size: 16px;
  }

  .vux-flexbox .vux-flexbox-item a {
    color: #000;
  }

  .vux-flexbox .vux-flexbox-item:not(:first-child) {
    margin-left: -1px;
  }

  .menu-flex {

  }

  .vux-flexbox:not(:first-child) {
    margin-top: -1px;
  }

  .vux-flexbox-item .icon {
    font-size: 40px;
  }

  .vux-flexbox-item p {
    margin-top: 10px;
  }

  .flex-content {
    height: 100%;
    padding: 1rem 0;
  }

  .user-center-bar .vux-flexbox-item .icon {
    font-size: 16px;
  }

  .user-center-bar {
    margin-bottom: .3rem;
  }

  .user-center-bar .vux-flexbox-item {
    padding: .2rem;
  }
  .user-center-bar .blue-button {
    border-radius: 4px;
    font-size: 12px;
    padding: 0.05rem .1rem;
  }
  .user-center-bar .blue-text{
    font-weight: 300;
  }
  .disabled{
    background: #f6f6f6;
  }

</style>
